<?php

namespace JsonLowCode\UI;

use JsonLowCode\Schema;
use JsonLowCode\Traits\Models\HasModeShow;
use JsonLowCode\Traits\Props\HasContentStyle;
use JsonLowCode\Traits\Props\HasDisplayDirective;
use JsonLowCode\Traits\Props\HasHeight;
use JsonLowCode\Traits\Props\HasNativeScrollbar;
use JsonLowCode\Traits\Props\HasPlacement;
use JsonLowCode\Traits\Props\HasTitle;
use JsonLowCode\Traits\Props\HasWidth;
use JsonLowCode\Traits\Props\HasZIndex;
use JsonLowCode\Traits\Slots\HasSlotFooter;
use JsonLowCode\Traits\Slots\HasSlotHeader;

/**
 * Drawer弹窗组件
 * @method static Drawer make(string $title = "", mixed $children = null) Drawer弹窗组件
 */
class Drawer extends Schema
{
    protected string $componentName = "AppDrawer";

    use HasModeShow, HasWidth, HasHeight, HasPlacement, HasTitle;

    use HasContentStyle, HasZIndex, HasDisplayDirective, HasNativeScrollbar;

    use HasSlotHeader, HasSlotFooter;

    /**
     * @param string $title
     * @param mixed|null $children
     */
    public function __construct(string $title = "",mixed $children = null)
    {
        parent::__construct();
        $title&&$this->title($title);
        $children&&$this->children($children);
    }

    /**
     * 顶部弹出
     * @return $this
     */
    public function top(): static
    {
        return $this->placement("top");
    }

    /**
     * 左侧弹出
     * @return $this
     */
    public function left(): static
    {
        return $this->placement("left");
    }

    /**
     * 右侧弹出
     * @return $this
     */
    public function right(): static
    {
        return $this->placement("right");
    }

    /**
     * 底部弹出
     * @return $this
     */
    public function bottom(): static
    {
        return $this->placement("bottom");
    }


    /**
     * 是否自动聚焦 Drawer 第一个可聚焦的元素
     * @param string|bool $bool
     * @return $this
     */
    public function autoFocus(string|bool $bool = true): static
    {
        return $this->prop("auto-focus",$bool);
    }

    /**
     * 是否在打开时禁用 body 滚动
     * @param string|bool $bool
     * @return $this
     */
    public function blockScroll(string|bool $bool = true): static
    {
        return $this->prop("block-scroll",$bool);
    }

    /**
     * 是否在摁下 Esc 键的时候关闭 Drawer
     * @param string|bool $bool
     * @return $this
     */
    public function closeOnEsc(string|bool $bool = true): static
    {
        return $this->prop("close-on-esc",$bool);
    }

    /**
     * 抽屉的默认宽度，在位置是 left 和 right 时生效
     * @param string|int $width
     * @return $this
     */
    public function defaultWidth(string|int $width = 251): static
    {
        return $this->prop("default-width",$width);
    }

    /**
     * 抽屉的默认高度，在位置是 top 和 bottom 时生效
     * @param string|int $height
     * @return $this
     */
    public function defaultHeight(string|int $height = 251): static
    {
        return $this->prop("default-height",$height);
    }

    /**
     * 点击遮罩时是否发出 update:show 事件
     * @param string|bool $bool
     * @return $this
     */
    public function maskClosable(string|bool $bool = true): static
    {
        return $this->prop("mask-closable",$bool);
    }

    /**
     * 抽屉是否可以调整宽度、高度
     * @param string|bool $bool
     * @return $this
     */
    public function resizable(string|bool $bool = true): static
    {
        return $this->prop("resizable",$bool);
    }

    /**
     * 是否显示遮罩，如果设为 'transparent' 会展示透明遮罩，如果设为 false 会禁用 trap-focus
     * @param string|bool $bool
     * @return $this
     */
    public function showMask(string|bool $bool = true): static
    {
        return $this->prop("show-mask",$bool);
    }

    /**
     * 抽屉出现的区域
     * @param string $to string | HTMLElement
     * @return $this
     */
    public function to(string $to): static
    {
        return $this->prop("to",$to);
    }

    /**
     * 是否将焦点锁定在 Drawer 内部
     * @param string|bool $bool
     * @return $this
     */
    public function trapFocus(string|bool $bool = true): static
    {
        return $this->prop("trap-focus",$bool);
    }

    /**
     * Drawer 出现后的回调
     * @param string $value () => void
     * @return $this
     */
    public function onAfterEnter(string $value = "()=>{}"): static
    {
        return $this->events("onAfterEnter",$value);
    }

    /**
     * Drawer 关闭后的回调
     * @param string $value () => void
     * @return $this
     */
    public function onAfterLeave(string $value = "()=>{}"): static
    {
        return $this->events("onAfterLeave",$value);
    }

    /**
     * 焦点在 Drawer 内部时按下 Esc 键的回调
     * @param string $value () => void
     * @return $this
     */
    public function onEsc(string $value = "()=>{}"): static
    {
        return $this->events("onEsc",$value);
    }

    /**
     * 点击遮罩的回调
     * @param string $value (e: MouseEvent) => void
     * @return $this
     */
    public function onMaskClick(string $value = "(e)=>{}"): static
    {
        return $this->events("onMaskClick",$value);
    }

    /**
     * 抽屉高度改变时执行的回调函数
     * @param string $value (height: number) => void
     * @return $this
     */
    public function onUpdateHeight(string $value = "(height)=>{}"): static
    {
        return $this->events("onUpdate:height",$value);
    }

    /**
     * 抽屉显示状态改变时执行的回调函数
     * @param string $value (show: boolean) => void
     * @return $this
     */
    public function onUpdateShow(string $value = "(show)=>{}"): static
    {
        return $this->events("onUpdate:show",$value);
    }

    /**
     * 抽屉宽度改变时执行的回调函数
     * @param string $value (width: number) => void
     * @return $this
     */
    public function onUpdateWidth(string $value = "(width)=>{}"): static
    {
        return $this->events("onUpdate:width",$value);
    }

}
